<template>
  <div class="search">
    <van-nav-bar
      title="搜索页"
      left-arrow
      left-text="返回"
      class="header"
      @click-left="onClickLeft"
    />

    <InputModel v-model='value'/>
    <button @click='search'>搜索</button>

    <div class="content">
      <div
        v-for="(item) in resultList"
        :key="item.id">
          <img :src="item.img" alt="" />
          <span>{{ item.tit }}</span>
        </div>
    </div>

    <div
      v-if="searchs.length > 0 && resultList.length <= 0">
      <h2>历史搜索</h2>
      <div
        v-for="(item, index) in searchs"
        :key="index">
          <span @click="setValue(item)">{{ item }}</span>、
      </div>
    </div>
  </div>
</template>

<script>
// 1. 引入组件
import InputModel from '@/components/InputModel';
import { mapState } from 'vuex';

export default {
  name: 'Search',
  data() {
    return {
      value: '',
      resultList: [],
      searchs: (sessionStorage.getItem('SEZRCHS') && JSON.parse(sessionStorage.getItem('SEZRCHS'))) || []
    }
  },
  computed: {
    // 从辅助函数里面解构的任何数据都会自动绑定到 this
    ...mapState({
      list: state => state.searchList,
    })
  },
  methods: {
    // 按钮返回
    onClickLeft() {
      this.$router.push('/index/home');
    },
    // 搜索按钮的点击事件
    search() {
      // 输入康内的数据为真时
      if(this.value && this.value !== ' ') {
        this.resultList = this.list.filter(item => item.tit.includes(this.value));
        this.searchs.unshift(this.value);

        sessionStorage.setItem('SEZRCHS', JSON.stringify(this.searchs));
      } else {
        // 不存在内容的时候
        this.resultList = [];
      }
    },
    // 点击搜索的某一项
    setValue(value) {
      // 重新对 value 赋值和重新过滤对应的数据
      this.value = value;
      this.resultList = this.list.filter(item => item.tit.includes(this.value));

      // 在搜索的数组内取出不带有当前这一项的数据，然后重新把当前这一项的数据追加到最前
      this.searchs = this.searchs.filter(item => item != value);
      this.searchs.unshift(value);
      
      // 都设置完毕之后，重新写入本都存储
      sessionStorage.setItem('SEZRCHS', JSON.stringify(this.searchs));
    }
  },
  // 注册组件
  components: {
    InputModel
  }
}
</script>

<style lang='scss'>
.header {
  background-image: linear-gradient(90deg,#0af,#0085ff);
  color: #fff;
  .van-nav-bar__text, .van-nav-bar__arrow, .van-nav-bar__title {
    color: #fff;
  }
}
</style>
